<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <link href="__ROOT__/public/static/index/css/countdown.css"  rel="stylesheet" type="text/css">
    <script src="__ROOT__/public/static/index/js/underscore-1.5.2-min.js" type="text/javascript"></script>
    <script src="__ROOT__/public/static/index/js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="__ROOT__/public/static/index/js/jquery.qrcode.min.js" type="text/javascript"></script>

	<title>计分板</title>
	<style type="text/css">
	    *{padding: 0px;margin:0px;}
	    html,body{height: 100%;width: 100%;background-image: url("__ROOT__/public/static/index/image/body.png");background-size: 100% 100%;font-family:'微软雅黑';overflow-x: hidden;}
    
        #player2-name,#player1-name{
            font-family:"微软雅黑";
        }
        #frame{
            font-family:"微软雅黑";
        }

        .box{width: 95%;height:100%;margin: 0 auto;}
        .player{width: 100%;height:40%;}
        .score{width: 100%;height: 48%;}
        .player_one{width: 45%;height: 94%;float:left;font-size: 80px;font-family: "微软雅黑";color: #fff;text-align: center;padding-top: 6%}
        .player_two{width: 45%;height: 94%;float: right;font-size: 80px;font-family: "微软雅黑";color: #fff;text-align: center;padding-top: 6%}

        .player_one p{margin-left: -15%;width: 110%;overflow: hidden;}
        .player_two p{margin-left: 6%;width: 100%;overflow: hidden;}

        .player-one-score{height: 100%;width: 35%;float: left;}
        .frame-info{height: 100%;width: 30%;float: left;}
        .player-two-score{height: 100%;width: 35%;float: left;}
        .footer{position:absolute; bottom:0;width: 90%;height: 12%;color: #fff;text-align: center;}
        #logout-code{position:fixed;z-index:2;bottom:5px;left:88%;width:90px; height:90px;}
	</style>
</head>
<body>
	<div class="box">
        <div class="player">

            <div class="player_one">
                {if condition="is_array($battle_info['player1_name'])"}
                <p>{$battle_info['player1_name'][0]}</p>
                <p>{$battle_info['player1_name'][1]}</p>
                {else /}
                 <p style="margin-top:40px">{$battle_info['player1_name']}</p>
                {/if}
            </div>


            <div class="player_two">
                {if condition="is_array($battle_info['player2_name'])"}
                <p>{$battle_info['player2_name'][0]}</p>
                <p>{$battle_info['player2_name'][1]}</p>
                {else /}
                 <p style="margin-top:40px">{$battle_info['player2_name']}</p>
                {/if}
            </div>
            <div style="clear:both"></div>
        </div>
       
        <div class="score">
             <div class="player-one-score">
                <div class="player1-score-one count down" style="left:65px;">
                <span class="current top player1-score-current-1">{$player1_score[0]}</span>
                <span class="next top player1-score-next-1">{$player1_score[0]}</span>
                <span class="current bottom player1-score-current-1">{$player1_score[0]}</span>
                <span class="next bottom player1-score-next-1">{$player1_score[0]}</span>
                </div>
                
                <div class="player1-score-two count down" style="left:245px;;">
                <span class="current top ">{$player1_score[1]}</span>
                <span class="next top ">{$player1_score[1]}</span>
                <span class="current bottom ">{$player1_score[1]}</span>
                <span class="next bottom ">{$player1_score[1]}</span>
                </div>

             </div>
             <div class="frame-info">
                 <div style="margin: 0 auto;width:300px;height:300px;background:url(__ROOT__/public/static/index/image/bg_frame.png) no-repeat;background-size: 85% 85%;background-position:top center;">
                    <div style="width:100%;height:80%;padding-top:78px;">
                        <p id="frame" style="color:#fff;font-size:45px;text-align:center;font-family:'微软雅黑'">总局数</p>
                        <p id="sum-frame" style="color:#fff;font-size:50px;text-align:center;padding-top:18px;font-family:'微软雅黑'">{$battle_info['sum_frame']}</p>
                    </div>
                 </div>
             </div>
             <div class="player-two-score">
                <div class="player2-score-one count down" style="right:245px;">
                <span class="current top ">{$player2_score[0]}</span>
                <span class="next top ">{$player2_score[0]}</span>
                <span class="current bottom ">{$player2_score[0]}</span>
                <span class="next bottom ">{$player2_score[0]}</span>
                </div>
        
                <div class="player2-score-two count down" style="right:65px;">
                <span class="current top ">{$player2_score[1]}</span>
                <span class="next top ">{$player2_score[1]}</span>
                <span class="current bottom ">{$player2_score[1]}</span>
                <span class="next bottom ">{$player2_score[1]}</span>
                </div>
        
             </div>
                <script id="count-template" type="text/template">
                <span class="current top <%= currentSize %>"><%= time %></span>
                <span class="next top <%= nextSize %>"><%= nextTime %></span>
                <span class="current bottom <%= currentSize %>"><%= time %></span>
                <span class="next bottom <%= nextSize %>"><%= nextTime %></span>
                </script>
        </div>
        <input type="hidden" id="player1-score-1" value="{$player1_score[0]}"/>
        <input type="hidden" id="player1-score-2" value="{$player1_score[1]}"/>
        <input type="hidden" id="player2-score-1" value="{$player2_score[0]}"/>
        <input type="hidden" id="player2-score-2" value="{$player2_score[1]}"/>

        <div style="clear:both"></div>
        <div class="footer">
            <p class="event-info" style="font-family:'微软雅黑';font-size:37px;padding-top:20px;">
            {$battle_info['event_name']} <span id="event-stage" style="font-family:'微软雅黑';font-size:37px">{$battle_info['event_stage']}</span></p>
        </div>
    <div>
    <div id="logout-code"><div>

    <input id="update-time" type="hidden" value="{$battle_info['update_time']}">

</body>

<script type="text/javascript">
    $('html').css({
            cursor: 'none'
    });
    $("#logout-code").qrcode({ 
        width: 90, //宽度 
        height:90, //高度 
        text: "{$Think.get.battle_id}" //任意内容 
    }); 
    //更新记分板
    function updateScoreBoard(){
        var update_time   = $("#update-time").val();

    	var url = "{:Url('Index/updateScoreBoard',['battle_id'=>$battle_id])}"+"?update_time="+update_time+"&";

        $.ajax({  
            url: url,  
            dataType: "json",  
            async:true, 
            cache: false,  
            // error: function (XMLHttpRequest, textStatus, errorThrown) {  
            //     $("#state").append("[state: " + textStatus + ", error: " + errorThrown + " ]<br/>");  
            //     if (textStatus == "timeout") { // 请求超时  
            //         longPolling(); // 递归调用  
            //     } else { // 其他错误，如网络错误等  
            //         longPolling();  
            //     }  
            // },  
            success: function (data) {
                if(data.state == 2){
                    var url = "{:Url('Index/index')}"+"?battle_id="+data.battle_id;
                    window.location.href = url;
                }else if(data.state == 3){
                    var url = "{:Url('Index/login')}";
                    window.location.href = url;
                }else if(data.state == 1){
                    var player1_score = data.battle_info['player1_score'].toString();
                    var player2_score = data.battle_info['player2_score'].toString();
                    
                    //新分数
                    var next_player1_score_1 = player1_score < 10 ? 0 : player1_score[0];
                    var next_player1_score_2 = player1_score < 10 ? player1_score : player1_score[1];
                    var next_player2_score_1 = player2_score < 10 ? 0 : player2_score[0];
                    var next_player2_score_2 = player2_score < 10 ? player2_score : player2_score[1];
                    //当前分数
                    var now_player1_score_1 = $("#player1-score-1").val();
                    var now_player1_score_2 = $("#player1-score-2").val();    
                    var now_player2_score_1 = $("#player2-score-1").val();
                    var now_player2_score_2 = $("#player2-score-2").val();
                    
                    var now_player1_score   = Number(now_player1_score_1+now_player1_score_2);
                    var now_player2_score   = Number(now_player2_score_1+now_player2_score_2);
                    
                    //红角选手的分数是否改变
                    if(now_player1_score != player1_score){
                        var opear = now_player1_score < player1_score ? 1 : -1;//判断是加分还是减分
                        updateScore(next_player1_score_1,next_player1_score_2,now_player1_score_1,now_player1_score_2,1,opear);
                    }
                    //蓝角选手的分数是否改变
                    if(now_player2_score != player2_score){
                        var opear = now_player2_score < player2_score ? 1 : -1;//判断是加分还是减分
                        updateScore(next_player2_score_1,next_player2_score_2,now_player2_score_1,now_player2_score_2,2,opear);
                    }

                    //开始判断是双打还是单打
                    var player1_name = data.battle_info['player1_name'].indexOf(',') > 0 ? data.battle_info['player1_name'].split(',') : (data.battle_info['player1_name'].indexOf('，') > 0 ? data.battle_info['player1_name'].split('，') : data.battle_info['player1_name'] );
                    var player2_name = data.battle_info['player2_name'].indexOf(',') > 0 ? data.battle_info['player2_name'].split(',') : (data.battle_info['player2_name'].indexOf('，') > 0 ? data.battle_info['player2_name'].split('，') : data.battle_info['player2_name'] );

                    if(player1_name instanceof Array){
                        $(".player_one").html('<p>'+player1_name[0]+'</p><p>'+player1_name[1]+'</p>');
                    }else{
                        $(".player_one").html('<p style="margin-top:40px">'+player1_name+'</p>');
                    }

                    if(player2_name instanceof Array){
                        $(".player_two").html('<p>'+player2_name[0]+'</p><p>'+player2_name[1]+'</p>');
                    }else{
                        $(".player_two").html('<p style="margin-top:40px">'+player2_name+'</p>');
                    }

                    $('#sum-frame').text(data.battle_info['sum_frame']);
                    $("#event-stage").text(data.battle_info['event_stage']);
                    $("#update-time").val(data.battle_info['update_time']);
                    updateScoreBoard();
                }else{
                	updateScoreBoard();
                }
                
            }  
        });  
    }
   
    window.onload=function(){ 
        updateScoreBoard();
    }
</script>
<script>
    Countdown = function () {
        _(this).bindAll('update', 'executeAnimation', 'finishAnimation');
        this.setVars.apply(this, arguments);
    };
    Countdown.prototype = {
        duration: 1000,
        setVars: function (time, el, template) {
            this.max = 0;
            this.time = 0;
            this.el = el;
            this.template = _(template.innerHTML).template();
            this.delta = -1;
        },
        update: function () {      
            this.setupAnimation();
            _(this.executeAnimation).delay(20);
            _(this.finishAnimation).delay(this.duration * 0.9);
            // _(this.update).delay(this.duration);
        },
        toggleDirection: function (add, remove) {
            this.el.classList.add(add);
            this.el.classList.remove(remove);
        },
        setSizes: function (score,nextSize) {
            this.currentSize = this.getSize(this.time);
            this.nextSize = this.getSize(this.nextTime);
        },
        getSize: function (time) {
            return time > 9 ? 'small' : '';
        },
        setupAnimation: function () {
            this.el.innerHTML = this.template(this);
            this.el.classList.remove('changed');
        },
        executeAnimation: function () {
            this.el.classList.add('changing');
        },
        finishAnimation: function () {
            this.el.classList.add('changed');
            this.el.classList.remove('changing');
        }
    };

    </script>

    <script type="text/javascript">

    //修改分数
    function updateScore(now_player_score_1,now_player_score_2,player_score_1,player_score_2,player,opera){
         if(now_player_score_2 != player_score_2){
             var countdown = new Countdown(player_score_2, document.querySelector('.player'+player+'-score-two'), document.querySelector('#count-template'));
                countdown.time      = player_score_2;
                opera == 1 ? countdown.toggleDirection('down', 'up') : countdown.toggleDirection('up', 'down');   
                countdown.nextTime  = now_player_score_2;
                countdown.setSizes(player_score_2,now_player_score_2);
                countdown.update();
        }

        if(now_player_score_1 != player_score_1){
             var countdown = new Countdown(player_score_1, document.querySelector('.player'+player+'-score-one'), document.querySelector('#count-template'));
                countdown.time      = player_score_1;
                opera == 1 ? countdown.toggleDirection('down', 'up') : countdown.toggleDirection('up', 'down');   
                countdown.nextTime  = now_player_score_1;
                countdown.setSizes(player_score_1,now_player_score_1);
                countdown.update();
              
        }

        $("#player"+player+"-score-1").val(now_player_score_1);
        $("#player"+player+"-score-2").val(now_player_score_2);
    }
</script>
</html>